﻿<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
        <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
            <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
                <c:set var="ctx" value="${pageContext.request.contextPath}" />
                <html>

                <head>
                    <link rel="stylesheet" href="${ctx}/common/common.css">
                    <title>Title</title>
                    <link rel="stylesheet" href="${ctx}/common/plugins/layuiadmin/layui/css/layui.css" media="all">
                    <link rel="stylesheet" href="${ctx}/common/plugins/layuiadmin/style/admin.css" media="all">
                    <script src="${ctx}/common/plugins/layuiadmin/layui/layui.js"></script>

                </head>
                <style>
                    .collarInfo {
                        padding-left: 20px;
                        padding-bottom: 20px;
                        padding-right: 20px;
                        border-radius: 10px;
                        margin-left: 20px;
                        width: 90%;
                        border: 1px solid #00F7DE;
                        display: flex;
                        flex-direction: column;
                        ;
                        margin-top: 50px
                    }

                    .collarInfo>ul {
                        border-bottom: 1px solid #0e9aef;
                        display: flex;
                        flex-direction: row;
                        justify-content: space-between;
                        padding-left: 50px;
                        padding-right: 50px;
                        padding-top: 10px;
                        padding-bottom: 10px
                    }

                    .collarDetail {
                        display: flex;
                        flex-direction: row;
                        flex-wrap: wrap;
                        justify-content: flex-start;
                        padding-left: 50px;
                        padding-right: 50px;
                        padding-top: 10px;
                        padding-bottom: 10px
                    }

                    .topCard {
                        display: flex;
                        flex-direction: row;
                        width: 240px;
                        height: 50px;
                        margin-left: 50px;
                        margin-top: 20px
                    }

                    .topCard>div {
                        color: white;
                        line-height: 50px;
                        text-align: center
                    }

                    .add_fanhui {
                        position: absolute;
                        top: 35px;
                        right: 40px;
                    }
                </style>

                <body>
                    <div style="positin:relative;">
                        <%--顶部信息--%>
                            <div class="topCard">
                                <div style="width: 30%;background-color: #1a7bb9;">加工单号</div>
                                <div style="width: 70%;background-color: #0e9aef;">
                                    <c:if test="${!empty collarMaterialList && collarMaterialList.size()>0}">
                                        ${collarMaterialList.get(0).workCode}
                                    </c:if>
                                </div>
                            </div>
                            <div class="layui-form-item add_fanhui">
                                <div class="layui-input-block">
                                    <button type="button" id="rollback" class="layui-btn layui-btn-primary">返回</button>
                                </div>
                            </div>
                            <%--工艺流程内容--%>
                                <c:forEach items="${collarMaterialList}" var="collarMaterial">
                                    <div class="collarInfo">
                                        <ul>
                                            <li>领料单号：${collarMaterial.code}</li>
                                            <li>领料人：${collarMaterial.creator_name}</li>
                                            <li>领料日期：
                                                <fmt:formatDate value="${collarMaterial.create_time}"
                                                    pattern="yyyy-MM-dd HH:mm" />
                                            </li>
                                        </ul>

                                        <div class="collarDetail">
                                            <c:forEach items="${collarMaterial.detailList}" var="detail"
                                                varStatus="index">
                                                <div style="width: 25%">
                                                    <div>
                                                        <div>
                                                            ${detail.mName}：${detail.quantity}*${detail.specifications}/${detail.unit}
                                                        </div>
                                                        <div> 领料仓库：${detail.wName}</div>
                                                    </div>
                                                </div>
                                                <c:if test="${index.count%4== 0}">
                                                    <div style="width: 100%;border-bottom: 1px dashed #0e9aef;"></div>
                                                </c:if>
                                            </c:forEach>
                                            <c:if test="${collarMaterial.detailList.size()%4!=0}">
                                                <div style="width: 100%;border-bottom: 1px dashed #0e9aef;"></div>
                                            </c:if>
                                        </div>
                                    </div>
                                </c:forEach>
                    </div>
                    <script>
                        document.getElementById("rollback").addEventListener("click", function () {
                            window.history.back();
                        })
                    </script>
                </body>

                </html>